<!--课程管理首页-->
<template>
  <div class="overtrue">

    <div class="head">
      <!--顶部工具栏-->
      <el-form size="small" :inline="true">
        <el-form-item >
          <el-input  v-model="inputValue" placeholder="输入课程编号"/>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item>
          <el-button  type="primary" plain icon="el-icon-plus" size="small" @click="AddCourse">新增</el-button>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="datas.length<=0" type="danger" plain icon="el-icon-delete" size="small" @click="DelCourses">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button :disabled="datas.length<=0" type="warning" plain icon="el-icon-download" size="small" @click="ExpCourses">导出</el-button>
        </el-form-item>
      </el-form>
      <!--分页组件 v-show:是否显示，total：总数，page.sync：第几页，limit.sync：一页几个，pagination：触碰事件-->
      <pagination class="pagination"
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"/>
    </div>

    <div class="body" v-loading="loading"><!--v-loading：加载时转圈圈的遮罩层-->
      <!--卡片外壳 v-for:遍历dataList；v-if：搜索输入框有字时进行判断是否显示，没字时无条件显示-->
      <div class="card-shell" v-for="(item,index) in dataList">
        <!--卡片 :class:根据元素里面的一个属性checked(右上角的按钮是否点击)来显示不同样式,card_active为卡片选取样式-->
        <el-card class="card"  :class="[item.checked===true?'card_active':'']">
          <!--卡片内容 -->
          <span class="card_id">{{item.id}}</span>
          <el-checkbox class="card_checkbox" v-model="item.checked" @change="SelectDatas(item)"></el-checkbox>
          <div @click="cardClick(item.id)">
            <div class="card_name">{{item.name}}</div>
            <div class="card_img">
              <el-image class="img" :src="item.imgUrl"  fit="full">
                <div slot="error" class="image-slot">
                  <el-image class="img" :src="defaultImg"  fit="full"></el-image>
                </div>
              </el-image>
            </div>
            <span class="card_periods">{{item.periods}}节</span>
            <span class="card_credit">{{item.credit}}分</span>
            <div class="card_divider"></div>
            <div class="card_notes">{{item.notes}}</div>
          </div>
        </el-card>
      </div>
    </div>
    <!--添加课程组件 courseDialogSwitch：控制该组件是否打开的开关；offCourseDialog：接收该组件传递回来的函数-->
    <addCourse :courseDialogSwitch="courseDialogSwitch" @offCourseDialog="offCourseDialog"></addCourse>
  </div>
</template>
<script>
import { deleteCourse, getCourse, getCourseList } from '@/api/system/course'
import addCourse from "@/views/system/course/addCourse/index.vue"
import course_cover from '../../../assets/images/course-cover.png'

export default {
  //变量区
  data(){
    return{
      //搜索框输入值
      inputValue:'',
      //添加课程对话框开关
      courseDialogSwitch:false,
      //数据总条数
      total:0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      //遮罩层
      loading:true,
      //默认课程封面
      defaultImg:course_cover,
      //选中的数组
      datas:[],
      //数据数组
      dataList:[],
    }
  },
  //页面加载时运行
  mounted(){
    this.getList();
  },
  //函数区
  methods:{
    /**搜索函数*/
    handleQuery(){
      getCourse(this.inputValue).then(res=>{
        this.queryParams.pageNum=1;
        this.total=1;
        this.dataList=[];
        this.dataList.push({
          id:res.data.courseId,
          name:res.data.courseName,
          periods:res.data.periods,
          credit:res.data.credit,
          notes:res.data.content,
          imgUrl:process.env.VUE_APP_BASE_API+res.data.headImg,
          checked:false,
        })
      })
    },
    /**点击卡片,跳转到页面详细页界面,query为传递过去的参数,itemId为点击的卡片的编号*/
    cardClick(itemId){
      this.$router.push({
        path: "course/content",
        query: { courseId: itemId }
      });
    },
    /**选中的数据,将选中的数据的编号添加到datas数组，如果没选中则去除*/
    SelectDatas(item){
      if(item.checked){
        this.datas.push(item.id)
      }else{
        this.datas=this.datas.filter(data=>data!==item.id)
      }
    },
    /** 批量删除课程,遍历datas数组的元素并依次调用删除课程的方法 */
    DelCourses(){
      this.datas.forEach(item=>{
        deleteCourse(item)
      })
      this.$modal.msgSuccess("删除课程成功");
      this.getList();
    },
    /** 批量导出课程 */
    ExpCourses(){
      console.log("点击导出按钮")
    },
    /**重置多选框*/
    resetQuery(){
      this.getList();
      this.inputValue="";
      this.dataList.forEach(item=>{
        item.checked=false;
      })
    },
    /** 查询课程列表 */
    getList() {
      //置空展示数据
      this.dataList=[];
      //遮罩层打开
      this.loading = true;
      //addDateRange(this.queryParams, this.dateRange)为查询参数
      getCourseList(this.addDateRange(this.queryParams, this.dateRange)).then(res=>{
        this.total=res.total;
        //数据交接
        res.rows.forEach(item=>{
          this.dataList.push({
            id:item.courseId,
            name:item.courseName,
            periods:item.periods,
            credit:item.credit,
            notes:item.content,
            imgUrl:process.env.VUE_APP_BASE_API+item.headImg,
            checked:false,
          })
        })
        //遮罩层关闭
        this.loading = false;
       });
    },
    /** 添加课程 */
    AddCourse(){
      //打开添加课程对话框
      this.courseDialogSwitch=true;
    },
    /** 关闭添加课程对话框 */
    offCourseDialog(newData){
      //获取添加课程对话框传递回来的参数，值应为false，用于关闭课程对话框
      this.courseDialogSwitch=newData;
      this.getList();
    }
  },
  //组件区
  components: {
    addCourse,
  },
}
</script>
<style scoped>
.overtrue{
  width: 100%;
  height:100%;
  padding-top: 1.5%;
  padding-left: 1.5%;
  padding-right: 1.5%;
}
.head{
  width: 100%;
  position: relative;
  .pagination{
    position: absolute;
    top:-50%;
    right: 0;
  }
}
.body{
  width: 100%;
  .card_active{
    border: 0.2vw solid rgb(63, 143, 240);
  }
  .card:hover{
    border-style: solid;
    border-width: 0.2vw;
  }
  .card-shell{
    width: 19%;
    aspect-ratio:1/1;
    display: inline-block;
    margin-right:1%;
    margin-bottom: 1%;
    cursor: pointer;
  }
  .card{
    width: 100%;
    aspect-ratio:1/1;
    position: relative;
    .card_id{

    }
    .card_checkbox{
      float: right;
    }
    .card_name{
      font-weight: 700;
      text-align: center;
    }
    .card_img{
      width: 53%;
      aspect-ratio:1/1;
      margin: 3% auto;
      border-radius: 3%;
      border: 1px solid rgb(198, 198, 201);
      .img{
        width: 100%;
        aspect-ratio:1/1;
      }
    }
    .card_college{

    }
    .card_periods{
      float: right;
    }
    .card_divider{
      width: 100%;
      height: 1px;
      background-color: #d0d0d0;
    }
    .card_notes{
      text-align: center;
    }
  }
  .card:nth-child(5n){
    margin-right: 0;
  }
}
</style>
